<template>
  <div class="left" v-if="detail">
    <div class="msg">
      <div class="pic">
        <img :src="detail.coverUrl" alt="" class="img" />
      </div>
      <div class="txts">
        <div class="top">
          <span class="tag">电台节目</span>
          <i>
            <em></em>
          </i>
          <p :title="detail.name">{{ detail.name }}</p>
        </div>
        <div class="btm">
          <i class="music"></i>
          <span class="txt" :title="detail.radio.name">{{ detail.radio.name }}</span>
          <span class="sub">
            <font-awesome-icon :icon="['far', 'star']" />
            订阅({{ detail.radio.subCount }})
          </span>
        </div>
      </div>
    </div>
    <div class="controls">
      <span>
        <font-awesome-icon :icon="['far', 'circle-play']" />
        播放 ({{ duration }})
      </span>
      <span>
        <font-awesome-icon :icon="['far', 'thumbs-up']" />
        ({{ detail.likedCount }})
      </span>
      <span>
        <Icon icon="tabler:message" class="icon" />
        ({{ detail.commentCount }})
      </span>
      <span>
        <Icon icon="fluent:share-16-filled" />
        {{ detail.shareCount }}
      </span>
      <span>
        <Icon icon="ooui:download" />
        下载
      </span>
      <i>
        <Icon icon="mdi:music" />
        生成外链播放器
      </i>
    </div>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import useAboutHttpHook from "./Hooks/useAboutLeftHttpHook";
import convert from "../utils/second_convert";
const duration = computed(() => {
  if (detail) {
    return convert(detail.value.duration);
  } else {
    return undefined;
  }
});
const $props = defineProps({
  id: {
    type: String,
    required: true,
  },
});
const { detail } = useAboutHttpHook($props.id);
</script>

<style lang="scss" scoped>
.left {
  padding: 20px;
  padding-top: 30px;
  .msg {
    display: flex;
    align-items: flex-start;
    column-gap: 3%;
    margin-bottom: 3%;
    .pic {
      min-width: 100px;
      width: 25%;
      padding: 1%;
      border: 1px solid #bbb;
      .img {
        width: 100%;
      }
    }
    .txts {
      margin-top: 10px;
      .top {
        display: flex;
        margin-bottom: 5%;
        .tag {
          flex-grow: 0;
          flex-shrink: 0;
          display: inline-block;
          height: 30px;
          line-height: 30px;
          background-color: #cf1919;
          color: #fff;
          font-size: 14px;
          padding-left: 8px;
          padding-right: 8px;
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
        }
        i {
          position: relative;
          display: inline-block;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-left: 15px solid #cf1919;
          em {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: #fff;
            left: -15px;
            top: 0;
            transform: translate(0, -50%);
            border-radius: 50%;
          }
        }
        p {
          width: 70%;
          font-size: 18px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      .btm {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .music {
          width: 20px;
          height: 20px;
          background-image: url("/src/assets/img/bg-music.png");
          background-size: cover;
        }
        .txt {
          margin-top: -2px;
          color: #777;
          margin-right: 15px;
          width: 41%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .sub {
          min-width: 93px;
          padding-block: 2px;
          padding-inline: 2px;
          border: 1px solid #999;
          border-radius: 3px;
          color: #555;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          &:hover {
            background-color: #f1f1f1;
          }
        }
      }
    }
  }
  .controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    align-items: center;
    span {
      text-align: center;
      display: flex;
      align-items: center;
      column-gap: 2px;
      padding-block: 2px;
      padding-inline: 1%;
      border: 1px solid #999;
      border-radius: 4px;
      background-color: #f3f3f3;
      color: #777;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 0 3px #777;
      &:hover {
        background-color: #fafafa;
      }
      &:first-child {
        background-color: #136ed0;
        color: #fff;
        border: none;
        box-shadow: 0 0 3px #064a8a;
        &:hover {
          background-color: #1c81e0;
        }
      }
      &:last-child {
        margin-right: 5px;
      }
    }
    i {
      display: flex;
      align-items: center;
      color: #2280c4;
      text-align: center;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
